String.prototype.reverse = function() {
    splitext  = this.split('');
    revertext = splitext.reverse();
    reversed  = revertext.join('');

    return reversed;
};

$(document).ready(function() {
	if (!('application' in window)) {
		window.application = {};
	}

	_gaa = $(this).application('animator');
    $('#header .headvideo .preview-layer').click(_gaa.headVideoTogglePlay);

    // Selectbox Replacement
    Replace_SelectBoxes();

    $('body').application('html-replacements');

    // Anchor Scrolling
    $('.anchor-scroll').anchorScroll();

    if (!navigator.userAgent.match(/Android/i)
	 && !navigator.userAgent.match(/webOS/i)
	 && !navigator.userAgent.match(/iPhone/i)
	 && !navigator.userAgent.match(/iPad/i)
	 && !navigator.userAgent.match(/iPod/i)
	 && !navigator.userAgent.match(/BlackBerry/i)) {
    	$('#navigation-main').removeClass('no-js');
    }

    if ('undefined' != typeof _gnhl) {
    	$('#navigation-main ul.root > li').each(function () {
    		if ($(this).data('node')) {
    			if (_gnhl == $(this).data('node').id) {
    				$(this).addClass('active');
    				return;
    			}
    		}
    	});
    }

	$('a[onclick*="fancybox"]').each(function() {
		var match = $(this).attr('onclick').toString().match(/width=(\d*),height=(\d*)/i);

		$(this).removeAttr('onclick');

		$(this).bind('click', function() {
	        $.fancybox.open({
	            padding : 23,
	            width : (parseInt(match[1])),
	            height : (parseInt(match[2])),
	            href : $(this).attr('href'),
	            type : 'iframe'
	        });

	        return false;
		});
	});

    $('a[onclick*="external-blue-red-calculator"]').each(function() {

        if(
            !navigator.userAgent.match(/Android/i)
            && !navigator.userAgent.match(/webOS/i)
            && !navigator.userAgent.match(/iPhone/i)
            && !navigator.userAgent.match(/iPod/i)
            && !navigator.userAgent.match(/BlackBerry/i)
        ) {

            $(this).removeAttr('onclick');

            $(this).click(function() {
                $.fancybox.open({
                    padding : 0,
                    width : 320,
                    height : 480,
                    href : $(this).attr('href'),
                    type : 'iframe',
                    closeBtn : false,
                    scrolling : 'no',
                    beforeShow : function() {
                        $('.fancybox-outer').attr('class', 'fancybox-outer alternate');
                    },
                    afterShow : function() {
                    	var $close = $('<div style="position: absolute; height: 15px; width: 15px; right: 7px; z-index: 2; top: 7px; cursor: pointer;"></div>');
                    	$close.bind('click', function() {
                    		$.fancybox.close();
                    	});
                    	$('.fancybox-inner').append($close);
                    }
                });

                return false;
            });
        }
    });

    $('#navigation-main').delegate('li', 'mouseover', function() {
        var $element = $(this);

        if (!$element.data('node')) return;

        $(document).stopTime('node-hide-' + $element.data('node').id);

        $(document).oneTime(200, 'node-show-' + $element.data('node').id, function () {
	        if (0 == $('> div', $element).length) {
	            var $div = $('<div></div>');
	            $element.append($div);

	            var parameter = {};
	            parameter[window.enxinia.queryprefix] = {"ajax": "/navigation/main/update", "navigation": {"node": $element.data('node').id}};

	            var jqxhr = $.ajax({
	                url: window.enxinia.uriprepath,
	                data: parameter,
	                success: function(data, textStatus, jqXHR) {
	                	if (data && ' ' != data) {
		                	var $data = $(data);

		                	if ($data.hasClass('w2')) {
		                		$data.css({display: 'block'});

		                		$('img', $data).each(function() {
		                			if ($(this).data('src')) {
		                				$(this).attr('src', $(this).data('src'));
		                				jQuery.removeData($(this), 'src');
		                			}
		                		});

		                		$div.remove();
		                		$element.append($data);
		                	} else {
		                        $div.removeData('ajax-call');
		                        $div.css({display: 'block'});
		                        $div.append($data);
		                	}
	                	}
	                }
	            });

	            $div.data('ajax-call', jqxhr);
	        } else {
	        	if ($('> div', $element).hasClass('w2')) {
            		$('img', $element).each(function() {
            			if ($(this).data('src')) {
            				$(this).attr('src', $(this).data('src'));
            				jQuery.removeData($(this), 'src');
            			}
            		});

            		$('> div', $element).css({display: 'block'});

	        	} else {
	        		$('> div', $element).css({display: 'block'});
	        	}
	        }
        });
    });

    $('#navigation-main').delegate('li', 'mouseout', function() {
    	var $element = $(this);
    	if (!$element.data('node')) return;

    	$(document).stopTime('node-show-' + $element.data('node').id);

    	$(document).oneTime(200, 'node-hide-' + $element.data('node').id, function () {
	        $div = $('> div', $element);
	        $div.css({display: 'none'});
	        var jqxhr = $div.data('ajax-call');

	        if (jqxhr) {
	            jqxhr.abort();
	            $div.remove();
	        }
    	});
    });

    $('#navigation-main li li').delegate('a', 'click', function() {
    	$('#navigation-main').undelegate('li', 'mouseout');

    	var $parents = $(this).parentsUntil('#navigation-main', 'div');
    	var $child   = $('div', $(this).parent());
    	var height   = 0;

    	$parents.each(function() {
    		if (height < $(this).height()) height = $(this).height();
    	});

    	if (height < $child.height()) height = $child.height();

    	if ($parents.length) {
    		var $x = $parents.eq($parents.length - 1);
    	} else {
    		var $x = $('> div', $target);

    	}

    	$x.animate({top: (height + 25) * -1}, 500, 'linear');
    });

    $('#navigation-main li.mainnav-trigger-close').delegate('a', 'click', function (e) {
        var $ul = $('> ul', $('#navigation-main'));
        $ul.animate({top: -($ul.height() + parseInt(79))}, 500, 'linear');
    });

    $('#breadcrumb').delegate('li', 'mouseover', function() {
    	var $element = $(this);
    	var $target  = $('#navigation-main li[data-node="{\"id\": ' + $element.data('node').id + '}"]');
    	var $parents = $target.parentsUntil('#navigation-main', 'div');
    	var height   = 0;

    	$parents.css({display: 'block'});
    	$('> div', $target).css({display: 'block'});

    	if (height < $('> div', $target).height()) height = $('> div', $target).height();

    	$parents.each(function() {
    		if (height < $(this).height()) height = $(this).height();
    	});

    	if ($parents.length) {
    		var $x = $parents.eq($parents.length - 1);
    	} else {
    		var $x = $('> div', $target);

    	}

    	$x.css({top: height * -1}).animate({top: 0}, 500, 'linear');
    });

    $('#content.reduced .etb-37 .email').mousedown(function() {
        $(this).attr('href', 'mailto:' + $(this).data('value').split(';781#&').join('@').reverse());
    });

    $('#content.full .etb-22 .table-tab-group').application('table-tab-group');
    $('#content.full .etb-50 .table-tab-group').application('table-tab-group', {items: 6});
    $('#content.reduced .etb-12 .table-tab-group').application('table-tab-group');
    $('#content.reduced .etb-31 .table-tab-group').application('table-tab-group');
    $('#content.reduced .etb-28 .criteria').application('table-tab-group', {items: 5});
    $('#content.full .etb-166 .filter').application('table-tab-group', {items: 3});

    /* Ceramic finder definitions */
    $('#content.reduced .etb-45 .choose.faucet .first .table-tab-group,'
    + '#content.reduced .etb-45 .choose.ceramic .first .table-tab-group,'
    + '#content.reduced .etb-45 .choose.ceramic .second .table-tab-group').application('table-tab-group', {items: 6});
    $('#content.reduced .etb-45 .choose.faucet .second .table-tab-group').application('table-tab-group', {items: 4});

    $('#content.full .etb-50, #content.reduced .etb-12').each(function() {
        var $resizeContainers = $('.viewport', this).parent().children();
        var $workspace        = $('.workspace', this);
        var $items            = $('.item', $workspace);

        var itemPaddingY = parseInt($($items[0]).css('padding-top')) + parseInt($($items[0]).css('padding-bottom'));

        $resizeContainers.height($workspace.height());
        $items.height($workspace.height() - itemPaddingY);
    });

    $('#content.full .etb-23').each(function() {
        var $element = $(this);

        var resize = function() {
            var $workspace      = $('.workspace.active', $element);
            var itemOuterHeight = 0;
            var itemHeight      = 0;

            $('.item', $workspace).each(function() {
                if ($(this).height() > itemHeight) {
                    itemOuterHeight = parseInt($(this).outerHeight(true));
                    itemHeight      = $(this).height();
                }
            });

            if (0 < itemHeight && 0 < itemOuterHeight) {
                $('.item', $workspace).each(function() {
                    $(this).height(itemHeight);
                });

                $workspace.height(itemOuterHeight);

                $('.viewport, .scroller-right, .scroller-left', $element).animate({
                    height: $workspace.height()
                }, 500);
            }
        };

        $element.delegate('.tab', 'click', function() {
            setTimeout(function() {
                resize();
            }, 50);
        });

        $('ul.color-list li a', $element).bind('click', function(e) {
            e.preventDefault();

            $('ul.color-list li', $element).removeClass('active');
            $(this).parent('li').addClass('active');

            $('form input.color-code', $element).val($(this).attr('data-color-code'));
            $('form .description', $element).html($(this).attr('data-color-name'));

            $.ajax({
                url: $('form', $element).attr('action'),
                data: $('form', $element).serialize(),
                beforeSend: function() {
                    $('div.table-tab-group', $element).animate({opacity: 0.5}, 200);
                },
                success: function(data) {
                    $('div.table-tab-group', $element).animate({opacity: 0}, 200, 'linear', function() {
                        var $parent = $('div.table-tab-group', $element).parent();
                        var $item   = $(data);

                        $item.css({opacity: 0});

                        $('div.table-tab-group', $element).remove();
                        $parent.append($item);
                        $item.application('table-tab-group');
                        $item.animate({opacity: 1}, 400, 'linear', function() {
                            resize();
                            resizeHead();
                        });
                    });
                },
                error: function() {
                    $('div.table-tab-group', $element).animate({opacity: 1}, 200);
                }
            });
        });

        var resizeHead = function() {

            var $containerRight = $('.wrapper .float-box-right', $element);
            var $containerLeft  = $containerRight.parent().children('h2');
            var availableWidth  = $('.wrapper > div', $element).width();

            if (($containerRight.width() + $containerLeft.outerWidth(true)) > availableWidth) {
                var $containerDescription = $('.description', $containerRight);
                var $containerList        = $('ul.color-list', $containerRight);

                var marginX = 0;
                marginX += parseInt($containerRight.contents().find('.float-box.mr').css('margin-right'));
                marginX += parseInt($containerRight.contents().find('ul.color-list').css('margin-right'));

                var newWidth = availableWidth - ($containerLeft.outerWidth(true) + $containerDescription.width() + marginX + parseInt($containerList.css('padding-right')) + parseInt($containerList.css('margin-right')));

                var liWidth   = 0;
                var lineBreak = false;

                $('li', $containerList).each(function(index) {
                    if (lineBreak) {
                        $(this).addClass('new-line');
                        lineBreak = false;
                    }

                    liWidth += $(this).width();

                    if ((liWidth + $($('li', $containerList)[index]).width()) >= newWidth) {
                        $(this).after($('<div class="cleaner"></div>'));
                        lineBreak = true;
                        liWidth   = 0;
                    }
                });
            }
        };

        resizeHead();
        resize();
    });

    $('#content.reduced .etb-23').each(function() {
        var $containerRight = $('.wrapper .float-box-right', this);
        var $containerLeft  = $containerRight.parent().children('h2');
        var availableWidth  = $('.wrapper > div', this).width();

        if (($containerRight.width() + $containerLeft.outerWidth(true)) > availableWidth) {
            var $containerDescription = $('.description', $containerRight);
            var $containerList        = $('ul.color-list', $containerRight);

            var marginX = 0;
            marginX += parseInt($containerRight.contents().find('.float-box.mr').css('margin-right'));
            marginX += parseInt($containerRight.contents().find('ul.color-list').css('margin-right'));

            var newWidth = availableWidth - ($containerLeft.outerWidth(true) + $containerDescription.width() + marginX + parseInt($containerList.css('padding-right')) + parseInt($containerList.css('margin-right')));

            var liWidth   = 0;
            var lineBreak = false;

            $('li', $containerList).each(function(index) {
                if (lineBreak) {
                    $(this).addClass('new-line');
                    lineBreak = false;
                }

                liWidth += $(this).width();

                if ((liWidth + $($('li', $containerList)[index]).width()) >= newWidth) {
                    $(this).after($('<div class="cleaner"></div>'));
                    lineBreak = true;
                    liWidth   = 0;
                }
            });
        }
    });

    // Delete Locator input values on focus
    $('.dealer-search-full,.dealer-search-half,.dealer-search-reduced,.dealer-search-teaser,.dealer-search-footer').focus(function() {
        $(this).attr('value', '');
    });

    // Calculating locator radio+label-container width
    if (0 < $('.etb-28').length) {
        var $blockContainer     = $('.etb-28');
        var $searchContainer    = $('form .search', $blockContainer);
        var $searchLeft         = $('.left', $searchContainer);
        var $searchRight        = $('.right', $searchContainer);
        var $searchRadioGroup   = $('.radio-group', $searchLeft);
        var $searchRadios       = $('.input-radio-wrap', $searchRadioGroup);
        var $criteriaContainer  = $('form .criteria .head', $blockContainer);
        var $criteriaRadioGroup = $('.radio-group', $criteriaContainer);
        var $labels             = $('.introduction', $blockContainer);
        var $radios             = $('.search .input-radio-wrap, .criteria .input-radio-wrap', $blockContainer);
        var $textInput          = $('.input-wrap', $searchRight);

        var labelMaxWidth         = 0;
        var radioMaxWidth         = 0;
        var searchRadioGroupWidth = 0;
        var emptySpace            = 0;
        var additionalWidth       = 0;

        // IE9 fix; Width for label is to small
        if ($.browser.msie && '9' == $.browser.version.slice(0,1)) {
            additionalWidth = 1;
        }

        $labels.each(function() {
            if (labelMaxWidth < $(this).width() + additionalWidth) {
                labelMaxWidth = $(this).width() + additionalWidth;
            }
        });

        $labels.css('width', labelMaxWidth);

        $radios.each(function() {
            if (radioMaxWidth < $(this).width() + additionalWidth) {
                radioMaxWidth = $(this).width() + additionalWidth;
            }
        });

        $radios.css('width', radioMaxWidth);

        $searchRadios.each(function() {
            searchRadioGroupWidth += $(this).width();
        });

        if (parseInt($searchLeft.css('max-width')) < (labelMaxWidth + parseInt($labels.css('margin-right')) + searchRadioGroupWidth)) {
            searchRadioGroupWidth = parseInt($searchLeft.css('max-width')) - labelMaxWidth - parseInt($labels.css('margin-right'));
            emptySpace = parseInt($searchLeft.css('min-width'));
        } else {
            emptySpace = $searchContainer.width() - $searchLeft.width() - parseInt($searchLeft.css('margin-left')) - parseInt($textInput.css('margin-right'));
        }

        if (emptySpace > parseInt($searchRight.css('max-width')) - parseInt($textInput.css('margin-right'))) {
            emptySpace = parseInt($searchRight.css('max-width')) - parseInt($textInput.css('margin-right'));
        }

        $searchRadioGroup.css('width', searchRadioGroupWidth);

        if (0 < emptySpace) {
            $textInput.css('width', emptySpace);
            $('input[type="text"]', $textInput).css('width', emptySpace - 10);
        }

        if ($criteriaContainer.width() < ($criteriaRadioGroup.width() + labelMaxWidth + parseInt($labels.css('margin-right')))) {
            var radioWidth = $criteriaContainer.width() - (labelMaxWidth + parseInt($labels.css('margin-right')));// $criteriaRadioGroup.width() - ($criteriaRadioGroup - $criteriaContainer.width());

            $criteriaRadioGroup.css('width', radioWidth);
        }
    }

    // Fancybox-Event
    if ($(document).fancybox) {
        $('#content.reduced .etb-16 .zoomimage, #content.reduced .etb-17 .zoomimage, #content.reduced .etb-18 .zoomimage, #content.reduced .etb-19 .zoomimage').fancybox({
            padding : 23,
            prevEffect : 'fade',
            nextEffect : 'fade',
            helpers : {
                title : {
                    type : 'outside'
                }
            },
            beforeShow : parsePrint
        });
        
        $('.zoomimage-title').fancybox({
            padding : 23,
            prevEffect : 'fade',
            nextEffect : 'fade',
            helpers : {
                title : {
                    type : 'outside'
                }
            },
            beforeShow : parsePrint,
            afterLoad : function() {
                if (null != $(this).attr('title')) {
                    this.title = '<span>' + $(this).attr('title') + '</span>';
                }
            }
        });

        $('.fancybox').fancybox({
            padding : 23,
            prevEffect : 'fade',
            nextEffect : 'fade',
            beforeShow : parsePrint,
            afterLoad : function() {
            	this.title = null;
            }
        });

        $('.fancybox.ajax').fancybox({
            padding : 23,
            prevEffect : 'fade',
            nextEffect : 'fade',
            type : 'ajax',
            onComplete : parsePrint,
            beforeShow : parsePrint,
            afterLoad : function() {
            	this.title = null;
            }
        });

        // Fancybox Druckfunktion
        $('.fancybox-opened .fancybox-print').live('click', function() {
            var content  = '<!DOCTYPE html><html><head>';
                content += '<title>' + document.title + '</title>';
                content += '<style type="text/css">* { margin: 0; }</style>';
                content += '</head><body>';
                content += $(this).parents('.fancybox-wrap').find('.fancybox-outer').html();
                content += '</body></html>';

            var $printContent = $(this).parents('.fancybox-wrap').find('.fancybox-outer');

            var width     = $printContent.innerWidth();
            var height    = $printContent.innerHeight();

            // Chrome benötigt andere Maße für das Popup, da dort weitere Druckeigenschaften reingeparst werden
            if ($.browser.chrome = $.browser.webkit && !!window.chrome) {
                if (800 > parseInt(width)) {
                    width = '800px';
                }

                if (460 > parseInt(height)) {
                    height = '460px';
                }
            }

            var popup = window.open(
                'about:blank',
                'printPopup',
                'width=' + width + ',height=' + height + ',status=yes,scrollbars=yes,resizable=yes'
            );

            $(popup.document).ready(function() {
                popup.document.write(content);
                popup.document.close();
                popup.focus();
                popup.print();
                popup.close();
            });
        });
    }

    /* Keramik-finder */
    $('.etb-45 .action-box .float-box').each(function() {
        $(this).css('height', $(this).parent('.background').height() - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom')));
    });

    $('.etb-45 .image-scroller').each(function() {
        var maxHeight = 0;

        $items = $(this).find('.item');

        $items.each(function() {
            var height = $(this).outerHeight();

            if (0 < $(this).find('.pointer').length) {
                height += $(this).find('.pointer').outerHeight() - 7;
            }

            if (height > maxHeight) {
                maxHeight = height;
            }
        });

        $(this).find('.viewport').css('height', maxHeight + 'px');
    });

    // IE-Fix because labels only perform clicks on form elements
    if ($.browser.msie && 9 > $.browser.version) {
        $('body').delegate('label', 'click', function(e) {
            e.stopPropagation();

            var attribute = $(this).attr('for');

            if (typeof attribute != 'undefined' && attribute != null && $('#' + attribute.toString()).length) {
                $('#' + attribute).parent().children('.html-replacement').trigger('click');
            }
        });
	}

    // notepad-container 
    $('.etb-47').bind('build', function() {
    	var $notepad = $(this);
    	var $container = $('.category-tabs', $notepad);
    	
    	//ie10 fix
    	if ($('.tab.settings', $container).prev().length > 0) {
	    	$('.tab.settings', $container).height(
	    		$('.tab.settings', $container).prev().innerHeight()
	    	);
    	}
        
    	$('.category-tabs .tab', $notepad).click(function() {
    		if (!$(this).hasClass('settings') && !$(this).hasClass('disabled')) {
	    		$('.category-tabs .tab', $notepad).removeClass('active');
	    		$(this).addClass('active');
	    		$('.category-tab-contents > *[data\-group!="' + $(this).data('group') + '"]', $notepad).hide();
	    		$('.category-tab-contents > *[data\-group="' + $(this).data('group') + '"]', $notepad).show(0, 'linear', function() {
	    			$(this).trigger('tabShown');
    			});
    		}
    		return false;
    	});
    });
    $('.etb-47').each(function() {
    	var $notepad = $(this);
    	var $container = $('.category-tabs', $notepad);
    	
    	$notepad.trigger('build');
    	
        var resizeCategories = function($that) {
            var height   = 0;
            var elements = new Array();

            $('.categories > div', $that).each(function() {
                if ($(this).hasClass('cleaner')) {
                    for (var i = 0; i < elements.length; i++) {
                        $('.gc, .gc > a', $(elements[i])).height(height);
                    }

                    height   = 0;
                    elements = new Array();
                } else {
                    if (height < $('.gc', $(this)).height()) {
                        height = $('.gc', $(this)).height();
                    }

                    elements.push($(this));
                }
            });
        };

        var resizeSteps = function($that) {
            var height   = 0;
            var elements = new Array();

            $('.steps .float-box.third', $that).each(function() {
                if (height < $('.content', $(this)).height()) {
                    height = $('.content', $(this)).height();
                }

                elements.push($(this));
            });

            for (var i = 0; i < elements.length; i++) {
                $('.content', $(elements[i])).height(height);
            }
        };

        $('.blocked-hint', $(this)).each(function() {
            var $content = $($(this).parent('.content')[0]);
            $content.css('padding-bottom', ($(this).height() + parseInt($(this).css('bottom')) + 10) + 'px');
        });

        resizeCategories($(this));

        $('.steps .float-box.gc', $(this)).each(function() {
            $('.content', $(this)).css('padding-bottom', ($('a.more', $(this)).height() + parseInt($('a.more', $(this)).css('bottom'))) + 'px');
        });

        $('.notepad-no-products', this).show();
        resizeSteps($(this));
        if ($('.notepad-no-products', this).hasClass('display-none')) {
        	$('.notepad-no-products', this).hide();
        }
    });

    // FAQ's
    $('#content.reduced .etb-49').each(function() {
        $('.arrow-list ul.root > li > a', $(this)).on('click', function(e) {
            e.preventDefault();

            $li = $(this).parents('li');
            $li.toggleClass('expand');
        });

        $('.categories .item-row .item a.mark-all', $(this)).on('click', function(e) {
            e.preventDefault();

            $wrapper = $(this).parents('.categories');

            $('.item-row .item input[type="checkbox"]', $wrapper).each(function() {
                if (!$(this).is(':checked')) {
                    $(this).click();
                }
            });
        });
    });

    // SMART Teaser
    $('#teaser .etb-69 .form-custom').each(function() {
        var $button         = $('button[type="submit"]', this);
        var $textInputWrap  = $('.input-wrap', this);
        var $textInputField = $('input[type="text"]', $textInputWrap);

        var availableWidth  = ($(this).width() - $button.width() - parseInt($textInputWrap.css('marginRight')));

        $textInputWrap.width(availableWidth);
        $textInputField.width((availableWidth - 10));
    });
    
    // Additional Content
    $.ajax({
    	type: 'get',
    	url: window.location.pathname + '?~%5Bajax%5D=%2Fadditional%2Fajax%2Findex',
    	cache: false,
    	dataType: 'json',
    	success: function(data)
    	{
    		if (data && 'content' in data && 'additional' in data['content']) {
    			for (var module in data['content']['additional']) {
    				var moduleData = data['content']['additional'][module];
    				switch (module) {
    					case 'smart-layer':
    						if ($('body > .fancybox-opened').length > 0) {
    							try {
    								$.fancybox.close();
    							} catch (e) {
    							}
    						}
    						$.fancybox.open({
								type: 'html',
								content: moduleData,
								padding: 23,
								scrolling: 'no'
    						});
    						break;
    				}
    			}
    		}
    	}
	});
});

// Fancybox: Zusaetzliche Druckmoeglichkeit
function parsePrint() {
    $('.fancybox-wrap').append($('<div class="fancybox-item fancybox-print" title="Print"></div>'));
}

$(window).load(function () {
    // Product Detail Page Scroller Init
    $('#content.reduced .etb-29').each(function() {

        $imageContainer = $(this).find('.product-image-container');
        $textContainer = $(this).find('.product-text-container');
        $clipContainer = $textContainer.find('.clip');

        imageContainerHeight = $imageContainer.outerHeight();
        headlineHeight = $textContainer.find('h1').outerHeight() + 10;
        topSpaceHeight =  $textContainer.find('.scroll-tb .top').outerHeight();

        $clipContainer.css('height', imageContainerHeight - headlineHeight - topSpaceHeight  + 'px');
    });

    // Init scrollers
    $('#content .scroll-lr').each(function() {
        scrollerLR($(this));
    });

    $('#content .scroll-tb').each(function() {
        scrollerTB($(this));
    });
});

function scrollerLR($elem) {
    var animationStep = 200;

    $blocks = $elem.find('.block');

    $elem.data('size', $blocks.length);
    $elem.data('offset', 1);
    $elem.data('content', $elem.find('.content'));
    $elem.data('content').data('parent', $elem);

    $elem.data('left', $elem.find('.left'));
    $elem.data('left').data('parent', $elem);
    $elem.data('left').css('opacity', '0.25');

    $elem.data('right', $elem.find('.right'));
    $elem.data('right').data('parent', $elem);

    $elem.data('left').click(function() {
        if ($(this).css('opacity') != '0.25') {

            $(this).data('parent').data('offset', $(this).data('parent').data('offset') - 1);

            if($(this).data('parent').data('offset') == $(this).data('parent').data('size')) {
                 $(this).data('parent').data('right').css('opacity', '0.25');
            } else {
                 $(this).data('parent').data('right').css('opacity', '1');
            }

            if($(this).data('parent').data('offset') == 1) {
                 $(this).data('parent').data('left').css('opacity', '0.25');
            } else {
                 $(this).data('parent').data('left').css('opacity', '1');
            }

            $(this).data('parent').data('content').animate({left: '+=400'}, animationStep, 'linear');
        }
    });

    $elem.data('right').click(function() {
        if ($(this).css('opacity') != '0.25') {

            $(this).data('parent').data('offset', $(this).data('parent').data('offset') + 1);

            if($(this).data('parent').data('offset') ==  $(this).data('parent').data('size')) {
                 $(this).data('parent').data('right').css('opacity', '0.25');
            } else {
                 $(this).data('parent').data('right').css('opacity', '1');
            }

            if($(this).data('parent').data('offset') == 1) {
                 $(this).data('parent').data('left').css('opacity', '0.25');
            } else {
                 $(this).data('parent').data('left').css('opacity', '1');
            }

            $(this).data('parent').data('content').animate({left: '-=400'}, animationStep, 'linear');
        }

    });

}

function scrollerTB($elem) {
    var baseAnimationTime   = 1000;
    var baseAnimationStep   = 100;

    $elem.data('top', $elem.find('.top'));
    $elem.data('bottom', $elem.find('.bottom'));
    $elem.data('content', $elem.find('.content'));
    $elem.data('clip', $elem.find('.clip'));

    contentHeight   = parseInt($elem.find('.content').outerHeight()) + 17;
    clipHeight      = parseInt($elem.data('clip').outerHeight());

    if (contentHeight <= clipHeight) {
        $elem.data('top').css('visibility', 'hidden');
        $elem.data('bottom').css('display', 'none');
        $elem.find('.fade-top').css('display', 'none');
        $elem.find('.fade-bottom').css('display', 'none');

    } else {
        if($elem.parent().hasClass('product-text-container')) {
            $elem.find('.clip').css('height', parseInt($elem.find('.clip').css('height')) - $elem.data('bottom').height() - 15 + 'px');
        }

        $elem.data('top').data('parent', $elem);
        $elem.data('bottom').data('parent', $elem);
        $elem.data('content').data('parent', $elem);

        $elem.data('top').css('opacity', '0.25');

        $elem.data('bottom').mouseover(function() {
            contentMargin   = 60;
            contentTop      = parseInt($(this).data('parent').data('content').css('top'));
            contentHeight   = parseInt($(this).data('parent').data('content').css('height'));
            clipHeight      = parseInt($(this).data('parent').data('clip').css('height'));

            animationHeight = contentHeight - clipHeight + contentTop + contentMargin;
            animationTime   = animationHeight / baseAnimationStep * baseAnimationTime;

            $(this).data('parent').data('top').css('opacity', '1');

            $(this).data('parent').data('content').animate({top: '-=' + animationHeight}, animationTime, 'linear', function() {
                $(this).data('parent').data('bottom').css('opacity', '0.25');
            });

        });

        $elem.data('bottom').mouseout(function() {
            $(this).data('parent').data('content').stop(true, false);
        });

        $elem.data('top').mouseover(function() {
            contentTop      = parseInt($(this).data('parent').data('content').css('top'));
            animationHeight = -contentTop;
            animationTime   = animationHeight / baseAnimationStep * baseAnimationTime;

            $(this).data('parent').data('bottom').css('opacity', '1');

            $(this).data('parent').data('content').animate({top: '+=' + animationHeight}, animationTime, 'linear', function() {
                $(this).data('parent').data('top').css('opacity', '0.25');
            });
        });

        $elem.data('top').mouseout(function() {
            $(this).data('parent').data('content').stop(true, false);
        });

    }
}

(function($) {
	// jQuery plugin implementation
	$.fn.application = function(module, options) {
		var api = null;

		this.each(function() {
	    	api = $(this).data(module);

	    	if (!api) {
	    		switch (module) {
	    			case 'table-tab-group':
	    				api = new Application_TableTabGroup($(this), options);
	    				break;
	    			case 'news-spinner':
	    				api = new Application_NewsSpinner($(this));
	    				break;
	    			case 'html-replacements':
	    				api = new Application_Form_Replacements($(this));
	    				break;
	    			case 'animator':
	    				api = new Application_Animator($(this));
	    				break;
	    		}

	    		$(this).data(module, api);
	    	}
		});

		return api;
	};
})(jQuery);

Application_Animator = function(element) {

    var video = document.getElementById('head-video');

    if(video) {
        video.controls = false;
    }

	this.slideUpMainNav = function () {
		var $ul       = $('> ul', $('#navigation-main'));
        var $wrapper  = $('#header .wrapper');

        $ul.stop();
        $wrapper.stop();

		$ul.animate({top: -$ul.height()}, 500, function() {
            $wrapper.animate({top : -87}, 500, function() {

            });
		});

	};

	this.slideDownMainNav = function () {

        var $ul       = $('> ul', $('#navigation-main'));
        var $wrapper  = $('#header .wrapper');

        $ul.stop();
        $wrapper.stop();

        $wrapper.animate({top : 0}, 500, function() {
            $ul.animate({top: 0}, 500, function() {

            });
        });

	};

    this.showTeaser = function (mode) {

        if (mode == 'swf') {
            var $teaser = $('.headvideo .media .teaser');
            $teaser.animate({opacity: 0}, 0, 'linear');
            $teaser.css('display', 'block');
            $teaser.animate({opacity: 1}, 500, 'linear');

        } else {
            this.headVideoTogglePause();
            var $teaser = $('.headvideo .media .teaser');
            $teaser.animate({opacity: 0}, 0, 'linear');
            $teaser.css('display', 'block');
            $teaser.animate({opacity: 1}, 500, 'linear');
        }
	};

    this.hideTeaser = function () {

        var $teaser = $('.headvideo .media .teaser');
        $teaser.animate({opacity: 0}, 500, 'linear', function() {$(this).css('display', 'none');});

	};

    this.headVideoTogglePause = function () {

        // Video controls ausblenden
        video = document.getElementById('head-video');
        video.controls = false;

        // Mainnavigation runterfahren
        var $ul       = $('> ul', $('#navigation-main'));
        var $wrapper  = $('#header .wrapper');

        $wrapper.animate({top : 0}, 500, function() {
            $ul.animate({top: 0}, 500, function() { });
        });

        // Poster einblenden
        $('.headvideo .preview-layer').css('display', 'block');
        $('.headvideo .preview-layer').animate({opacity: 1}, 500, 'linear');

        // BreadCrumb runterfahren
        $breadcrumb = $('#breadcrumb');
        $breadcrumb.animate({top: 57}, 500, 'linear');

        // Teaser hochfahren
        $('#teaser').animate({marginTop: -34}, 500, 'linear');

        // Logo Hochfahren
        $('#logo').animate({top: 0}, 500, 'linear');

        // Metabox hochfahren
        $('#header .wrapper .meta-box').animate({top: 0}, 500, 'linear');

        // Sidebar einfahren
        //$('#sidebar .social-links').css('position', 'absolute');
        $('#sidebar .social-links').animate({right: 0}, 500, 'linear');
    };

    this.headVideoTogglePlay = function () {

        // Teaser abschalten
        var $teaser = $('.headvideo .media .teaser');
        $teaser.animate({opacity: 0}, 500, 'linear', function() {$(this).css('display', 'none');});

        // Video abspielen
        video = document.getElementById('head-video');
        video.play();
        video.controls = true;

        // Poster ausblenden
        $('.headvideo .preview-layer').animate({opacity: 0}, 500, 'linear', function() {$('.headvideo .preview-layer').css('display', 'none');});

        // Mainnavigation hochfahren
        var $ul = $('> ul', $('#navigation-main'));
        $ul.animate({top: -($ul.height() + parseInt(79))}, 500, 'linear');

        // Breadcrumb hochfahren
        $breadcrumb = $('#breadcrumb');
        $breadcrumb.animate({top: -($breadcrumb.height())}, 500, 'linear');

        // Teaser runterfahen
        $('#teaser').animate({marginTop: 0}, 500, 'linear');

        // Logo Hochfahren
        $('#logo').animate({top: -80}, 500, 'linear');

        // Metabox hochfahren
        $('#header .wrapper .meta-box').animate({top: -80}, 500, 'linear');

        // Sidebar ausfahren
        //$('#sidebar .social-links').css('position', 'absolute');
        $('#sidebar .social-links').animate({right: -30}, 500, 'linear');

    };

    this.videoTrack = function (_action, _file) {

        //console.log('Action: ' + _action);
        //console.log('File: ' + _file);

        if ('undefined' != typeof data && data.trackEvent) {
            data.trackEvent('video', _action, _file, 0, false);
        }
    };

};

Application_TableTabGroup = function(element, options) {
	var $element = element;
	var options  = $.extend({items: 4}, options);
	var _enabled = true;
	
	$('.scroller-left', $element).data('functions', {'check': function() {
		var $workspace = $('div.viewport div.workspace.active', $element);

		if ($workspace.data('tab').position <= 0) {
			$('div.scroller-left', $workspace.parent().parent()).addClass('inactive');
		} else {
			$('div.scroller-left', $workspace.parent().parent()).removeClass('inactive');
		}
	}});

	$('.scroller-right', $element).data('functions', {'check': function() {
		var $workspace = $('div.viewport div.workspace.active', $element);
		var limit      = $workspace.data('tab').count - options.items;

		if ($workspace.data('tab').position >= limit) {
			$('div.scroller-right', $workspace.parent().parent()).addClass('inactive');
		} else {
			$('div.scroller-right', $workspace.parent().parent()).removeClass('inactive');
		}
	}});

	$('div.viewport div.workspace', $element).each(function() {
		var $workspace = $(this);
		$workspace.data('tab').count    = $('.item', $workspace).length;
		$workspace.data('tab').width    = $('.item:first', $workspace).outerWidth(true);
		$workspace.data('tab').position = 0;

		$workspace.width($workspace.data('tab').count * $workspace.data('tab').width);

		if ($workspace.hasClass('active')) {
			if ($workspace.data('tab').count > options.items) {
				var activeIndex = $('div.item', $workspace).index($('div.active', $workspace));
				var min = 0;
				var max = $workspace.data('tab').count - options.items;
				
				var selectedIndex = activeIndex - Math.floor(options.items / 2);
				
				if (selectedIndex > max) {
					selectedIndex = max;
				} else if (selectedIndex < min) {
					selectedIndex = min;
				}

				if (selectedIndex > 0) {
					$workspace.data('tab').position = selectedIndex;
					$workspace.css({left: $workspace.data('tab').width * selectedIndex * -1});
				}
			}

			var $parent = $workspace.parent().parent();
    		$('div.scroller-left', $parent).data('functions').check();
    		$('div.scroller-right', $parent).data('functions').check();
		}
	});

	$('td, .tab-group-switch', $element).bind('click', function () {
		var $viewports = $('div.viewport div.workspace', $element);
		var $tab       = $(this);

		$tab.siblings().removeClass('active');
		$tab.addClass('active');

		$viewports.removeClass('active');
		$viewports.each(function() {
			if ($(this).data('tab').identifier == $tab.data('tab').identifier) {
				var $workspace = $(this);
				var $parent    = $workspace.parent().parent();
				$workspace.addClass('active');

	    		$('div[class^="scroller-left"]', $parent).data('functions').check();
	    		$('div[class^="scroller-right"]', $parent).data('functions').check();

				return;
			}
		});
	});

	$('.scroller-left', $element).bind('click', function() {
		if (_enabled) {
			var $workspace = $('div.viewport div.workspace.active', $element);

			if ($workspace.data('tab').position > 0) {
				$workspace.data('tab').position -= 1;
	    		$workspace.animate({left: '+=' + $workspace.data('tab').width}, 400);
			}

			$('div.scroller-left', $(this).parent()).data('functions').check();
			$('div.scroller-right', $(this).parent()).data('functions').check();
		}
	});

	$('.scroller-right', $element).bind('click', function() {
		if (_enabled) {
			var $workspace = $('div.viewport div.workspace.active', $element);
			var limit      = $workspace.data('tab').count - options.items;

			if ($workspace.data('tab').position < limit) {
				$workspace.data('tab').position += 1;
	    		$workspace.animate({left: '-=' + $workspace.data('tab').width}, 400);
			}

			$('div.scroller-left', $(this).parent()).data('functions').check();
			$('div.scroller-right', $(this).parent()).data('functions').check();
		}
	});

	this.disable = function () {
		if (_enabled) {
			_enabled = false;
			$('div.viewport', $element).css('opacity', 0.5);
			$('div.scroller-left', $element).addClass('inactive');
			$('div.scroller-right', $element).addClass('inactive');
		}

		return this;
	};

	this.enable = function () {
		if (!_enabled) {
			_enabled = true;
			$('div.viewport', $element).css('opacity', 1);
			$('div.scroller-left', $element).data('functions').check();
			$('div.scroller-right', $element).data('functions').check();
		}

		return this;
	};

	this.isEnabled = function () {
		return _enabled;
	};
};

Application_Form_Replacements = function(element) {
	var $element = element;

	$('input[type="checkbox"]', $element).each(function() {
		var $source = $(this);

		if (!$(this).data('html-replacement')) {
			var $link = $('<a class="html-replacement checkbox" href="#"></a>');

			$link.data({'html-replacement': {'source': $source}});
			$source.data({'html-replacement': {'replacement': $link}});

            if ($source.attr('tabindex')) {
                $link.attr('tabindex', $source.attr('tabindex'));
            }

			if ($source.prop('checked')) {
				$link.addClass('checked');
			}

			if ($source.prop('disabled')) {
				$link.addClass('disabled');

				if ($source.attr('id')) $('label[for="' + $source.attr('id') + '"]').addClass('disabled');
			}

			$link.bind('click', function(e) {
				e.preventDefault();
				if (!$source.attr('disabled')) {
				    $source.trigger('click');
				}
			});

			$source.bind('click', function() {
				$link.toggleClass('checked');
			});

			$source.hide();
			$source.after($link);
		}
	});

	$('input[type="radio"]', $element).each(function() {
		var $source = $(this);

		if (!$(this).data('html-replacement')) {
			var $link = $('<a class="html-replacement radio" href="#"></a>');
			
			$link.data({'html-replacement': {'source': $source}});
			$source.data({'html-replacement': {'replacement': $link}});

            if ($source.attr('tabindex')) {
                $link.attr('tabindex', $source.attr('tabindex'));
            }

			if ($source.prop('checked')) {
				$link.addClass('checked');
			}
			
            if ($source.prop('disabled')) {
                $link.addClass('disabled');

                if ($source.attr('id')) $('label[for="' + $source.attr('id') + '"]').addClass('disabled');
            }

			$link.bind('click', function(e) {
			    e.preventDefault();
				$source.trigger('click');
			});

			$source.bind('click', function() {
				var $current = $(this);

				if ($link.hasClass('checked') && 'checked' == $current.attr('checked')) return;

				$link.toggleClass('checked');

				$('input[type="radio"]', $element).each(function() {
					if ($(this).data('html-replacement') && $(this).attr('name') == $current.attr('name') && $(this).attr('value') != $current.attr('value')) {
						$(this).data('html-replacement').replacement.removeClass('checked');
					}
				});
			});
			
			$source.bind('uncheck', function() {
				var $current = $(this);
				
				$current.prop('checked', false);
				$current.data('html-replacement').replacement.removeClass('checked');
			});

			$source.hide();
			$source.after($link);
		}
	});
};

Application_NewsSpinner = function(element) {
	var $element = element;

    // News Dock Homepage
    var animationStep   = 650;
    var silentStep      = 10000;
    var buttonLock      = false;
    var $contentsElem   = $('.contents', $element);
    var $scrollElems    = new Array();
    var $activeNews     = false;
    var $nextNews       = false;
    var clickTimeout    = false;

    var contentTransitionLeft = {left: '-=170'};
    var contentTransitionRight = {left: '+=170'};

    var activeTransition = {
            width: '116',
            paddingTop: '9',
            paddingBottom: '9',
            paddingLeft: '27',
            paddingRight: '27'
    };

    var nextTransition = {
            width: '201',
            paddingTop: '0',
            paddingBottom: '0',
            paddingLeft: '17',
            paddingRight: '17'
    };

    var activeImageTransition = {
            width: '116',
            height: '74'
    };

    var nextImageTransition = {
            width: '201',
            height: '128'
    };

    var blendInTransition = {
            opacity: '1'
    };

    var blendOutTransition = {
            opacity: '0'
    };

    var shadowInTransition = {
            top: 150,
            width: 229
    };

    var shadowOutTransition = {
            top: 90,
            width: 167
    };

    $('.scroll-right', $element).click(function() {
        if (!buttonLock) {
            buttonLock = true;

            $currentElem = $('.elem.active', $element);
            $nextElem = $('.elem.active', $element).next();

            $nextNews = $activeNews.next();
            if($nextNews.html() == null) {
                $nextNews = $('.news-item-full', $element).first();
            }

            if($nextElem) {

                $currentElem.removeClass('active');
                $nextElem.addClass('active');

                // Content nach inks
                $contentsElem.animate(contentTransitionLeft, animationStep, 'linear', function() {

                    // Das erste Element hinter das letzte hängen
                    $contentsElem.append($('.elem', $element).first());
                    $contentsElem.css('left', '-171px');

                    buttonLock = false;
                });

                // Active verkleinern
                $currentElem.animate(activeTransition, animationStep, 'linear');
                $currentElem.find('img').animate(activeImageTransition, animationStep, 'linear');
                $currentElem.find('.shadow').animate(shadowOutTransition, animationStep, 'linear');

                // Next vergrößern
                $nextElem.animate(nextTransition, animationStep, 'linear');
                $nextElem.find('img').animate(nextImageTransition, animationStep, 'linear');
                $nextElem.find('.shadow').animate(shadowInTransition, animationStep, 'linear');

                // Active ausblenden
                $activeNews.animate(blendOutTransition, animationStep, 'linear', function() { $(this).css('display', 'none'); });

                // Next einblenden
                $nextNews.css('display', 'block');
                $nextNews.animate(blendInTransition, animationStep, 'linear',  function() { $activeNews = $nextNews; } );

            }
            else {
                buttonLock = false;
            }
        }

    });

    $('.scroll-left', $element).click(function() {

        if (!buttonLock) {
            buttonLock = true;

            $currentElem = $('.elem.active', $element);
            $nextElem = $('.elem.active', $element).prev();

            $nextNews = $activeNews.prev();
            if($nextNews.html() == null) {
                $nextNews = $('.news-item-full', $element).last();
            }

            if($nextElem) {
                $currentElem.removeClass('active');
                $nextElem.addClass('active');

                // Content nach rechts
                $contentsElem.animate(contentTransitionRight, animationStep, 'linear');

                // Active verkleinern
                $currentElem.animate(activeTransition, animationStep, 'linear');
                $currentElem.find('img').animate(activeImageTransition, animationStep, 'linear');
                $currentElem.find('.shadow').animate(shadowOutTransition, animationStep, 'linear');

                // Next vergrößern
                $nextElem.animate(nextTransition, animationStep, 'linear');
                $nextElem.find('img').animate(nextImageTransition, animationStep, 'linear', function() {
                    // Das letzte Element vor das erste hängen
                    $contentsElem.prepend($('.elem').last());
                    $contentsElem.css('left', '-171px');

                    buttonLock = false;
                });
                $nextElem.find('.shadow').animate(shadowInTransition, animationStep, 'linear');

                // Active ausblenden
                $activeNews.animate(blendOutTransition, animationStep, 'linear', function() { $(this).css('display', 'none'); });

                // Next einblenden
                $nextNews.css('display', 'block');
                $nextNews.animate(blendInTransition, animationStep, 'linear',  function() { $activeNews = $nextNews; });
            } else {
                buttonLock = false;
            }
        }
    });


    // IE-relevant
    $('.news-item-full', $element).css('opacity', 0);
    // Contents duplizieren
    $contentsElem.append($contentsElem.html());

    $('.contents .elem', $element).click(function(e) {

        if ($(this).next().hasClass('active')) {
            $('.dock-container .scroll-left', $element).click();
        }

        if ($(this).next().next().hasClass('active')) {
            $('.dock-container .scroll-left', $element).click();
            $(document).stopTime('auto-click');
            $(document).oneTime(animationStep, 'auto-click', function() { buttonLock = false;  $('.dock-container .scroll-left').click();});
        }

        if ($(this).prev().hasClass('active')) {
            $('.dock-container .scroll-right', $element).click();
        }

        if ($(this).prev().prev().hasClass('active')) {
            $('.dock-container .scroll-right', $element).click();
            $(document).stopTime('auto-click');
            $(document).oneTime(animationStep, 'auto-click', function() { buttonLock = false;  $('.dock-container .scroll-right').click();});
        }
    });

    // Das x-te Element "aktivieren"
    $activeElem = $('.contents .elem', $element).eq(2);
    $activeElem.addClass('active');
    $activeElem.css('width', '201px').css('padding', '0px 17px');
    $activeElem.find('img').css('width', '201px').css('height', '128px');
    $activeElem.find('.shadow').css('top', '150px').css('width', '229px');

    var $activeNews = $('.news-item-full', $element).eq(2);
    $activeNews.css('display', 'block');
    $activeNews.animate(blendInTransition, animationStep, 'linear');

    // Contents auf die richtige Breite setzen
    var contentsWidth = 0;

    $('.contents .elem').each(function() {
        if($(this).width() == 123) {
            contentsWidth += 123 + 23 + 23 + 1;
        }
        else {
            contentsWidth += 229 + 3 + 3 + 1;
        }
    });

    $contentsElem.css('width', contentsWidth + 'px');

    // Das letzte Element vors erste Element stellen
    $contentsElem.prepend($('.elem', $element).last());

    // Den Offset korrigieren
    $contentsElem.css('left', parseInt($contentsElem.css('left')) - 171 + 'px');

    $element.mouseover(function() {
        $(document).stopTime('silentStep');
    });

    $element.mouseout(function() {
        $(document).everyTime(silentStep, 'silentStep', function(i) {
            $('.dock-container .scroll-right').click();
        });
    });

    $(document).everyTime(silentStep, 'silentStep', function(i) {
        $('.dock-container .scroll-right').click();
    });

};

$(document).ready(function() {
	$('#content .etb-43').application('news-spinner');
});


window.onload = function() {

    // Referenzen Headline Fix
    $('#content.reduced .etb-33 .image-caption-transparent h3').each(function(i) {
        if(i % 2 == 1) {
            firstHeight = $firstElement.height();
            secondHeight = $(this).height();
            if(firstHeight != secondHeight) {

                if(firstHeight > secondHeight) {
                    $(this).css('height', firstHeight + 'px');
                    $firstElement.css('height', firstHeight + 'px');

                }
                else {
                    $firstElement.css('height', secondHeight + 'px');
                    $(this).css('height', secondHeight + 'px');

                }
            }
        } else {
            $firstElement = $(this);
        }
    });

    // Sitemap First Level Height fix
    $('#content.reduced .etb-41 .container > ul > li > a > div.text').each(function(i) {

        if($('#content.reduced .etb-41').data('divElements') == undefined) {
            $divElements = new Array();
            $('#content.reduced .etb-41').data('divElements', $divElements);
            $('#content.reduced .etb-41').data('maxHeight', 0);
        }

        $divElements = $('#content.reduced .etb-41').data('divElements');
        maxHeight    = $('#content.reduced .etb-41').data('maxHeight');
        $divElements[$divElements.length] = $(this);


        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();
        }

        $('#content.reduced .etb-41').data('divElements', $divElements);
        $('#content.reduced .etb-41').data('maxHeight', maxHeight);

        if((i + 1) % 4 == 0) {
            $divElements = $('#content.reduced .etb-41').data('divElements');
            maxHeight    = $('#content.reduced .etb-41').data('maxHeight');

            for(key in $divElements) {
                $divElements[key].css('height', maxHeight + 'px');
            }

            $divElements = new Array();
            $('#content.reduced .etb-41').data('divElements', $divElements);
            $('#content.reduced .etb-41').data('maxHeight', 0);
        }
    });
};

Replace_SelectBoxes = function () {

    if($('body').data('sb-replacement') == null) {
        $('body').data('sb-replacement', {
            inited : false,
            activeReplaceElem : false,
            replaceCount : 0
        });
    }

    $('select.replacement').each(function() {

        if($(this).css('display') != 'none') {

            options             = new Object();
            optionHtml          = '';

            optionSelectedIndex = 0;
            optionCount         = 0;

            colorClass          = '';

            $(this).attr('id', 'sb-input-' + $('body').data('sb-replacement').replaceCount);

            // CSS trigger class for color variants
            if ($(this).hasClass('bright')) {
                colorClass = ' bright';
            }

            var optionAmout = $(this).find('option').length;

            $(this).find('option').each(function() {

                optionValue = $(this).attr('value');
                optionLabel = $(this).html();

                options[optionCount] = {
                        value : optionValue,
                        label : optionLabel
                };

                if($(this).attr('selected')) {
                    optionSelectedIndex = optionCount;
                }

                if (optionAmout == optionCount + 1) {
                    classStr = ' class="last"';
                } else if (optionCount == 0) {
                    classStr = ' class="first"';
                } else {
                    classStr = '';
                }

                optionHtml += '<li' + classStr + ' data-value="' + optionValue + '"><div>' + optionLabel + '</div></li>' + "\n";
                optionCount++;
            });

            firstOptionLabel = options[optionSelectedIndex].label;

            replacementHtml = '<ul id="sb-replace-' + $('body').data('sb-replacement').replaceCount + '" class="sb-replace' + colorClass + '">\
                        <li class="tr"><div class="sbtrig">\
                                <div class="sb-l"></div>\
                                <div class="sbc"><div class="sb-lbl">' + firstOptionLabel + '</div></div>\
                                <div class="sbr"></div>\
                            </div>\
                            <div class="sb-box sb-bot">\
                                <div class="sbtop">\
                                    <div class="sb-l"></div>\
                                    <div class="sbc"></div>\
                                    <div class="sbr"></div>\
                                </div>\
                                <div class="sbc">\
                                    <div class="sb-l">\
                                        <div class="sbr">\
                                            <div class="sbc">\
                                                <div class="sb-tshw"></div>\
                                                <div class="top-space"></div>\
                                                <div class="scroll-up"><div class="arrow"></div></div>\
                                                <div class="clip">\
                                                    <ul class="contents">\
                                                        ' + optionHtml + '\
                                                    </ul>\
                                                </div>\
                                                <div class="scroll-down"><div class="arrow"></div></div>\
                                                <div class="sb-botspc"></div>\
                                                <div class="sb-bshw"></div>\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>\
                                <div class="sb-bot">\
                                    <div class="sb-l"></div>\
                                    <div class="sbc"></div>\
                                    <div class="sbr"></div>\
                                </div>\
                            </div>\
                        </li>\
                    </ul>';

            var html = $(replacementHtml);
            html.data('replacement', $(this).data('replacement'));

            $(this).after(html);
            $(this).css('display', 'none');

            $('#sb-replace-' + $('body').data('sb-replacement').replaceCount).data('input', $('#sb-input-' + $('body').data('sb-replacement').replaceCount));


            $replacement = $('#sb-replace-' + $('body').data('sb-replacement').replaceCount);
            $replacement.data('generated', '1');

            $input = $('#sb-input-' + $('body').data('sb-replacement').replaceCount);

            $input.data('replacement', $replacement );

            $input.find('option').each(function () {

                if ($(this).attr('selected')) {

                    var htmlValue = $(this).attr('value');
                    $elements = $(this).parent().data('replacement').find('.sb-box li');

                    $elements.each(function() {
                        if (htmlValue == $(this).data('value')) {
                            $(this).addClass('active');
                        }
                    });

                    return true;
                }

            });

            $('body').data('sb-replacement').replaceCount++;
        }
    });

    $('.sb-replace').each(function() {

        if($(this).find('.sb-box').css('display') != 'block') {

            $(this).find('.sb-box').css('display', 'block');

            height      = false;
            width       = false;

            $data = eval("(" + $(this).data('replacement') + ")");
            $(this).data('replacement', $data);

            if ($(this).data('replacement')) {
                if($(this).data('replacement').height) {
                    height      = $(this).data('replacement').height;
                }

                if($(this).data('replacement').width) {
                    width       = $(this).data('replacement').width;
                }

                if($(this).data('replacement').tabindex) {
                    $(this).find('> .tr').attr('tabindex', $(this).data('replacement').tabindex);
                }
            }

            clipHeight  = 0;
            clipCount   = 0;
            itemOffset  = 0;

            $box = $(this).find('.sb-box');

            if (width) {
                ctrlWidth = parseInt(width);
            } else {
                ctrlWidth = $box.width();
            }

            // Anpassungen, sodass auch %-Werte angegeben werden koennen
            if ('string' == typeof(width) && '%' == width.substr(width.length - 1, width.length)) {
                // Umrechnung des %-Werts in den Pixel-Wert. Dezimalstellen werden gekuerzt, nicht gerundet!
                ctrlWidth = parseInt(((parseInt($(this).parent().width()) / 100) * ctrlWidth).toString().split('.')[0]);
            }

            $(this).css('width', ctrlWidth + 'px');
            $(this).find('.sb-box .sbtop .sbc').css('width', ctrlWidth - 16 + 'px');
            $(this).find('.sb-box .sb-bot .sbc').css('width', ctrlWidth - 16 + 'px');

            $(this).find('.sb-box .sb-tshw').css('width', ctrlWidth - 4 + 'px');
            $(this).find('.sb-box .sb-bshw').css('width', ctrlWidth - 4 + 'px');

            $(this).css('visibility', 'visible').css('position', 'relative');


            if ($.browser.msie && $.browser.version == '7.0') {
                var boxWidth = ctrlWidth;
                $box.find('li div').each(function() {
                    $(this).css('width',  (boxWidth - 53) + 'px').css('display', 'block');
                });
            }

            var clipped = false;
            $box.find('li').each(function() {

                itemOffset += $(this).outerHeight();

                if(clipCount < height || !height) {
                    clipHeight += $(this).outerHeight();
                } else {
                    clipped = true;
                }

                $(this).data('offsetTop', itemOffset);

                clipCount++;
            });

            if(!clipped) {
                $(this).find('.scroll-up').css('display', 'none');
                $(this).find('.scroll-down').css('display', 'none');
            }
            else {
                $(this).find('.clip').addClass('clipped');
            }

            $(this).find('.clip').css('height', clipHeight + 1 + 'px').css('overflow', 'hidden');

            var $contents = $(this).find('.contents');
            var $clip = $(this).find('.clip');
            var clipSize = parseInt($clip.css('height'));

            $(this).find('.sb-box li').each(function() {
                if ($(this).hasClass('active') && $(this).data('offsetTop') > clipSize) {
                    scrollAmount = clipSize - parseInt(($(this).data('offsetTop')));
                    $contents.animate({'top': scrollAmount}, 100);
                }
            });

            var buttonLock = false;

            $box.find('.scroll-up').click(function(e) {

                $main = $(this).parent().parent().parent().parent().parent().parent().parent();
                $clip = $main.find('.clip');
                var $contents = $main.find('.contents');
                $contents.stop(true, true);

                var scrollTop   = parseInt($contents.css('top'));
                var clipSize    = parseInt($clip.height());
                var scrolled    = false;
                var contentSize = parseInt($contents.css('height'));

                if(scrollTop + clipSize < 0) {
                    $contents.animate({'top': '+=' + clipSize}, 200);
                } else {
                    $contents.animate({'top':  + 0 }, 200);
                }

                e.stopPropagation();
            });

            $box.find('.scroll-down').click(function(e) {

                $main = $(this).parent().parent().parent().parent().parent().parent().parent();
                $clip = $main.find('.clip');
                var $contents = $main.find('.contents');
                $contents.stop(true, true);

                var scrollTop   = parseInt($contents.css('top'));
                if(isNaN(scrollTop)) {
                    scrollTop = 0;
                }
                var clipSize    = parseInt($clip.height());
                var scrolled    = false;
                var contentSize = parseInt($contents.css('height'));

                if(scrollTop - clipSize > -(contentSize - clipSize)) {
                    $contents.animate({'top': '-=' + (clipSize)}, 200);
                } else {
                    $contents.animate({'top':  + (-contentSize + clipSize)}, 200);
                }

                e.stopPropagation();
            });

            $box.find('.clip li').click(function(e) {
            	if ($(this).hasClass('disabled')) {
            		return false;
            	}

                $main = $(this).parent().parent().parent().parent().parent().parent().parent().parent().parent();
                $input = $main.data('input');

                $(this).parent().find('li').removeAttr('class');
                $(this).parent().find('li').last().attr('class','last');
                $(this).parent().find('li').first().attr('class','first');
                $(this).addClass('active');

                if ($input) {
                    value = $(this).data('value');

                    $input.find('option').removeAttr('selected');
                    $input.find('option').each(function(e) {
                        if(value == $(this).attr('value')) {
                            $(this).attr('selected', true);
                            $(this).change();
                        }
                    });
                }

                label = $(this).find('div').html();

                $main.find('.sbtrig .sb-lbl').html(label);
            });

            $(this).find('.tr').click(function(e) {

                direction = 'bottom';
                if ($(this).parent().data('replacement')){
                    if ($(this).parent().data('replacement').direction) {
                        direction       = $(this).parent().data('replacement').direction;
                    }
                }

                $box            = $(this).parent().find('.sb-box');
                $box.attr('class', 'sb-box ' + direction);

                boxOffset       = $box.offset();
                wndHeight       = $(window).height();
                boxHeight       = $box.height();
                boxTop          = boxOffset.top;
                wndScrollTop    = $('html').scrollTop();

                if(direction == "top") {

                    if (boxTop < wndScrollTop) {
                        $box.attr('class', 'sb-box sb-bot');

                    } else {
                        $box.attr('class', 'sb-box sbtop');
                    }

                } else {
                    if (boxTop + boxHeight  > wndHeight + wndScrollTop) {
                        $box.attr('class', 'sb-box sbtop');
                    } else {
                        $box.attr('class', 'sb-box sb-bot');
                    }
                }

                $('.sb-replace').each(function() {
                    $(this).css('zIndex', 102);
                    $(this).find('sbtrig').css('zIndex', 101);
                });

                $(this).parent().css('zIndex', 104);
                $(this).parent().find('.sbtrig').css('zIndex', 103);

                if ($(this).hasClass('active')) {
                    $(this).removeClass('active');
                    $('body').data('sb-replacement').activeReplaceElem = false;
                } else {
                    $(this).addClass('active');

                    if($('body').data('sb-replacement').activeReplaceElem) {
                        $('body').data('sb-replacement').activeReplaceElem.removeClass('active');
                    }

                    $('body').data('sb-replacement').activeReplaceElem = $(this);
                }

                e.stopPropagation();
            });
        }

    });

    if ($('body').data('sb-replacement').inited == false) {
        $(document).click(function() {
            if($('body').data('sb-replacement').activeReplaceElem) {
                $('body').data('sb-replacement').activeReplaceElem.removeClass('active');
                $('body').data('sb-replacement').activeReplaceElem = false;
            }
        });
    }

    $('body').data('sb-replacement').inited = true;

    // GROHE Red & Blue Configurator
    $('#content.reduced .etb-43 .intro-container').delegate('.state', 'click', function() {
        $('#content.reduced .etb-43 .path').val($(this).data('path').value);
        $('#content.reduced .etb-43 .main-form').attr('action', RBCAction + ($(this).data('level') + 1) + '#step');
        $('#content.reduced .etb-43 .main-form').submit();
    });

    $('#content.reduced .etb-43 .intro-container').delegate('.state', 'mouseover', function() {

        $(this).parent().parent().find('.state').each(function() {
            $(this).attr('class', 'state');
        });

        $(this).attr('class', 'state active');
    });

    $('#content.reduced .etb-43 .result').delegate('.trigger', 'change', function() {

        $width = $('#content.reduced .etb-43 #col-value-width');
        $height = $('#content.reduced .etb-43 #col-value-height');
        $depth = $('#content.reduced .etb-43 #col-value-depth');

        var width = parseInt($width.html());
        var height = parseInt($height.html());
        var depth = parseInt($depth.html());

        if($(this).attr('checked')) {
            $width.html(width + parseInt($(this).parent().data('dimensions').w));
            $height.html(height + parseInt($(this).parent().data('dimensions').h));
            $depth.html(depth + parseInt($(this).parent().data('dimensions').d));
        }
        else {

            $width.html(width - parseInt($(this).parent().data('dimensions').w));
            $height.html(height - parseInt($(this).parent().data('dimensions').h));
            $depth.html(depth - parseInt($(this).parent().data('dimensions').d));
        }

    });

    $('#content.reduced .etb-43').delegate('div.layer', 'click', function() {
        $layer = $('#content.reduced .etb-43 div.layer');
        $('#content.reduced .etb-43 .main-form').submit();

        return false;
    });

    $('#content.reduced .etb-43').delegate('div.layer', 'mouseout', function() {
        $(this).css({display: 'none'});
    });

    $('#content.reduced .etb-43').delegate('div.item', 'mouseout', function() {
        $layer = $('#content.reduced .etb-43 div.layer');
        $layer.css({display: 'none'});
    });

    $('#content.reduced .etb-43').delegate('div.layer', 'mouseover', function() {
        $(this).css({display: 'block'});
    });

    $('#content.reduced .etb-43').delegate('div.item', 'mouseover', function() {
        $layer = $('#content.reduced .etb-43 div.layer');

        var left = $(this).position().left + $(this).parent().position().left - 50;
        var top =  $(this).offset().top - 150;

		var layerWidth = parseInt($layer.css('width'));

        $layerImageContainer = $layer.find('div.image');
        $layerImage = $layer.find('div.image img');
        $layerText = $layer.find('div.text');
        $layerMask = $layer.find('div.mask');

        $itemText = $(this).find('div.additional-text');
        $itemImage = $(this).find('div.image img');
        $itemImageContainer = $(this).find('div.image');
        $itemMask = $(this).find('div.mask');
        $itemZoomImage = $(this).find('div.zoom-image');

        $('#content.reduced .etb-43 .path').val($(this).data('path').value);
        $('#content.reduced .etb-43 .main-form').attr('action', RBCAction + ($(this).data('level') + 1)  + '#step');

        if($itemMask.css('display') == 'block') {
            $layerMask.css('display', 'block');
            $layerImageContainer.css('padding-top' , '53px').css('min-height', '175px');
        }
        else {
            $layerMask.css('display', 'none');
            $layerImageContainer.css('padding-top' , '0px').css('min-height', '218px');
        }

        $layerImageContainer.html($itemZoomImage.html());
        $layerText.html($itemText.html());

        $layer.css({display: 'block', left : left, top : top});
    });
    
  	if ($.browser.msie && $.browser.version == 7) {
	    var $etb168Blocks = $('.etb-168').each(function(i, $block) {
	        etb168MaxHeight = 0;
	        $(this).find('.column').each(function(j, $column) {
	        	etb168ColumnHeight = $(this).height();
	        	
	        	if(etb168MaxHeight < etb168ColumnHeight) {
	        		etb168MaxHeight = etb168ColumnHeight;
	        	}
	        });
	        
	        $(this).find('.column').each(function(j, $column) {
	        	$(this).css('height', etb168MaxHeight + 'px');
	        });
	    });
  	}
};